@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "../../lib/variables";
@import "../../lib/colors";

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(100% - 50px);
  width: 100%;
  height: 100%;
  background-color: $bg-color;
  transition: transform 600ms cubic-bezier(0.9,0,0.25,1);
  z-index: 9999;

  &.open {
    transform: translateX(calc( -100vw + 50px));

    .toggle {
      color: $bg-color;

      &:before {
        height: 100%;
      }
    }

    .menu {

      ul {

        li {
          animation-name: fadeInUp;
          animation-delay: .2s;
        }

        li:nth-child(1) {
          animation-duration: .3s;
        }
    
        li:nth-child(2) {
          animation-duration: 2 * .3s;
        }
    
        li:nth-child(3) {
          animation-duration: 3 * .3s;
        }

      }

    }

    @include media-breakpoint-up(md) {
      transform: translateX(calc( -100vw + 100px));
    }
    
  }

  @include media-breakpoint-up(md) {
    left: calc(100% - 100px);
  }

}

.toggle {
  position: absolute;
  top: 0;
  display: block;
  // transition: none !important;
  width: 50px;
  height: 100%;
  background-color: $bg-color;
  color: white;
  transition: color 600ms cubic-bezier(0.9,0,0.25,1);

  &:hover {
    color: inherit;
    text-decoration: none;
  }

  &::before {
    backface-visibility: hidden;
    background-color: white;
    content: '';
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    transition: height 600ms cubic-bezier(0.9,0,0.25,1);
    width: 100%;
    will-change: height;
  }

  span {
    display: block;
    font-size: 1.033rem;
    transform: rotate(90deg) translateX(2.333rem);

    @include media-breakpoint-up(sm) {
      font-size: 1.3333rem;
    }

    @include media-breakpoint-up(md) {
      transform: rotate(90deg) translateX(4.333rem);
    }

    @include media-breakpoint-up(xl) {
      font-size: 2.333rem;
    }
  }

  @include media-breakpoint-up(md) {
    width: 100px;
  }
}

.menu {
  position: absolute;
  width: calc(100% - 50px);
  margin-left: 50px;

  a, a:visited {
    color: white;
    text-decoration: none;
  }

  a:hover {
    border-bottom: 4px solid white;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
  }

  @include media-breakpoint-up(md) {
    width: calc(100% - 100px);
    margin-left: 100px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.items {
  // height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;

  font-size: calc(1vw + 1vh + .5vmin);
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.777em;
}
